<!--
 * @Description: 
 * @Author: Bart 1714877505@qq.com
 * @Date: 2025-04-24
 * @LastEditors: Bart 1714877505@qq.com
 * @LastEditTime: 2025-04-25
-->
<template>
  <div class="create-box">
    <div class="header">交易所账户-编辑</div>
    <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" @finish="onFinish">
      <a-form-item label="账户类型" name="accountType">
        <a-select v-model:value="formState.accountType" :disabled="true" placeholder="请选择" style="width: 400px" :labelInValue="true">
          <a-select-option v-for="item in ACCOUNT_TYPE_OPTIONS" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="手机号" name="userPhone">
        <a-input v-model:value="formState.userPhone" :disabled="true" style="width: 400px" :maxlength="20" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="账户地址" name="accountAddress">
        <a-input v-model:value="formState.accountAddress" :disabled="true" style="width: 400px" :maxlength="20" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="状态" name="accountStatus">
        <a-radio-group v-model:value="formState.accountStatus">
          <a-radio :value="0">正常</a-radio>
          <a-radio :value="9">已冻结</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="备注" name="remarks">
        <a-textarea v-model:value="formState.remarks" style="width: 400px" :maxlength="200" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 3 }">
        <a-button type="primary" html-type="submit" :loading="submitLoading">确定</a-button>
        <a-button class="back-btn" @click="pageBack()">返回</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { onMounted, reactive, ref, UnwrapRef } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestUpdateUserAddress } from '/@/api/exchange/account'
  import { clearExchangeAccount, getExchangeAccount } from '/@/storage'

  import { ACCOUNT_TYPE_OPTIONS } from './constants'

  /** 基础数据 */
  const router = useRouter()
  const submitLoading = ref(false)
  /** 表单数据 */
  const formRef = ref()
  const labelCol = { span: 3 }
  const wrapperCol = { span: 21 }
  const formState: UnwrapRef<AccountTypes.IResponse> = reactive({
    userPhone: null,
    accountType: undefined,
    accountStatus: undefined,
    remarks: null,
    accountAddress: null,
  })
  const detailInfo = ref<AccountTypes.IResponse>({
    userPhone: '',
    accountType: undefined,
    accountStatus: undefined,
    remarks: '',
    accountAddress: '',
    accountId: '',
    createTime: '',
  })
  /**提交表单 */
  const onFinish = (values) => {
    submitLoading.value = true
    console.log('\n\n---values---', values)
    const params = {
      accountId: detailInfo.value.accountId,
      accountStatus: values.accountStatus,
      remarks: values.remarks,
    }
    console.log('\n\n---params', params)
    onSubmit(params)
  }

  const onSubmit = async (params) => {
    const { responseCode } = await requestUpdateUserAddress(params)
    if (responseCode === 100000000) {
      message.success('保存成功')
      pageBack()
    } else {
      message.error('保存失败')
    }
    submitLoading.value = false
  }

  /**回退页面*/
  const pageBack = () => {
    clearExchangeAccount()
    router.back()
  }

  onMounted(() => {
    const _info = getExchangeAccount()
    if (_info) {
      formState.userPhone = _info.userPhone
      formState.accountType = _info.accountType
      formState.accountStatus = _info.accountStatus
      formState.remarks = _info.remarks
      formState.accountAddress = _info.accountAddress
      detailInfo.value = _info
    }
  })
</script>
<style lang="less" scoped>
  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;

    .logo-img {
      width: 100%;
      height: 100%;
    }
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .create-box {
    width: 100%;
    padding: 0 24px 30px;
    background: #fff;
    border-radius: 2px;

    .header {
      width: 100%;
      height: 64px;
      margin-bottom: 20px;
      border-bottom: 1px solid #f2f3f5;
      font-size: 16px;
      font-weight: bold;
      color: #000;
      line-height: 64px;
    }

    .create-title {
      padding-left: 20px;
      margin-bottom: 10px;
      font-size: 16px;
      color: #000;
    }

    .create-order-select {
      margin-top: 20px;
    }

    .back-btn {
      margin-left: 20px;
    }

    .label-box {
      width: 100%;
      display: flex;
      align-items: center;

      .label-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #08979c;
        text-align: center;
        font-size: 24px;
        line-height: 32px;
        color: #fff;
        cursor: pointer;
      }

      .label-btn,
      .label-list {
        margin-left: 20px;
      }

      .label-item {
        margin-right: 10px;
      }
    }
  }
</style>
